<template>
    <div class="app-container">
        <div class="appminTop">
            <el-container>
                <el-aside width="50%">
                    <p class="minTopOneTitle">元数据变更总计</p>
                    <div class="tableScrooll">
                        <div v-if="isSearchLine" class="before-search">暂无数据</div>
                        <div v-else class="pieStyle" id="pie"></div>
                        <ul>
                            <li class="Added">
                                <p>86.55%</p>
                                <span>新增</span>
                            </li>
                            <li class="amend">
                                <p>12.80%</p>
                                <span>修改</span>
                            </li>
                            <li class="delete">
                                <p>0.65%</p>
                                <span>删除</span>
                            </li>
                        </ul>
                    </div>
                </el-aside>
                <el-main>
                    <div class="minTopOneTitle">
                        <p>元数据变更次数统计</p>
                        <el-button type="primary" plain>本月</el-button>
                        <el-button plain>本周</el-button>
                        <el-date-picker v-model="value4" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <div class="linStyleOne" id="lineOne"></div>
                    </div>
                </el-main>
            </el-container>
        </div>
        <div class="appminMiddle">
            <el-form :model="form" ref="form" size="small" :inline="true" label-width="100px" class="formStyle">
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery" class="gotoseach">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="appminBottom">
            <el-container>
            <el-aside width="50%">
                <div class="minTopOneTitle">
                        <p>下级元数据变更次数统计</p>
                        <el-button type="primary" plain>本月</el-button>
                        <el-button plain>本周</el-button>
                        <el-date-picker v-model="value4" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <div class="linStyleOne" id="lineTwo"></div>
                    </div>
                </el-aside>
                <el-main>
                    <div class="minTopOneTitle">
                        <p>业务数据变更次数统计</p>
                        <el-button type="primary" plain>本月</el-button>
                        <el-button plain>本周</el-button>
                        <el-date-picker v-model="value4" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <div class="linStyleOne" id="lineThree"></div>
                    </div>
                </el-main>
                </el-container>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "changeStatistics",
    components: {},
    data() {
        return {
            //饼状图是否有数据
            isSearchLine: false,
            value4: [],
            form:{},
        };
    },
    mounted() {
        //一进来加载饼状图
        this.myPie();
        //第一个折线图
        this.myLineOne();
        //第二个折线图
        this.myLineTwo();
        // 第三个折线图
        this.myLineThree();
    },
    methods: {
        myPie() {
            var myChart = echarts.init(document.getElementById("pie"));
            myChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: "Access From",
                        type: "pie",
                        radius: "90%",
                        avoidLabelOverlap: false,
                        label: {
                            //去掉引导线
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: 1048 },
                            { value: 735 },
                            { value: 580 },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            });
        },
        myLineOne() {
            var myChart = echarts.init(document.getElementById("lineOne"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['20220806', '20220807', '20220808', '20220809', '20220810', '20220811', '20220812']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false //去掉折线图中的横线
                    }
                },
                grid: {
                    height: '60%',
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            })
        },
        myLineTwo(){
            var myChart = echarts.init(document.getElementById("lineTwo"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['20220806', '20220807', '20220808', '20220809', '20220810', '20220811', '20220812']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false //去掉折线图中的横线
                    }
                },
                grid: {
                    height: '60%',
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            })
        },
        myLineThree(){
            var myChart = echarts.init(document.getElementById("lineThree"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['20220806', '20220807', '20220808', '20220809', '20220810', '20220811', '20220812']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false //去掉折线图中的横线
                    }
                },
                grid: {
                    height: '60%',
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            })
        },
        //搜索
        handleQuery(){

        },
    },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
@import "~@/assets/styles/CommonStyle.scss";
.app-container {
    font-family: "PingFang SC", "microsoft yahei";
    background: #ccc;
    height: 755px;
}
.appminTop {
    width: 100%;
    height: 40%;
}

.appminMiddle {
    width: 100%;
    height: 18%;
    margin: 10px 0;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.appminBottom {
    width: 100%;
    height: 40%;
    // background-color: gold;
}

.el-aside {
    background-color: #fff;
    margin: 0;
}

.el-main {
    padding: 8px  20px 8px 0;
    margin-left: 20px;
    height: 345px;
    width: 800px;
    background-color: #fff;

}

.minTopOneTitle {
    margin: 0 20px;
    padding-top: 10px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    height: 55px;

    p {
        display: inline-block;
        margin-right: 20px;
    }
}

.tableScrooll {
    padding: 10px 0;
    height: 275px;
    position: relative;

    ul {
        list-style: none;

        li {
            p {
                display: inline-block;
                margin-right: 15px;
                font-size: 22px;
                font-weight: 500;
            }
        }
    }
}

.before-search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.pieStyle {
    width: 400px;
    height: 220px;
}

.linStyleOne {
    width: 715px;
    height: 240px;
}

.Added {
    position: absolute;
    top: 40px;
    right: 40px;

}

.amend {
    position: absolute;
    top: 80px;
    right: 40px;
}

.delete {
    position: absolute;
    top: 120px;
    right: 40px;
}
::v-deep .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
    width: 300px;
    margin-left: 10px;
}
</style>
